<template>
	<div>
		<el-container style="overflow:hidden" v-if="displayModel">
			<el-header>
				<!-- <div class="test">kk</div> -->
				<transition name="slide-fade">
					<div v-show="display" class="box_b">
					</div>
				</transition>
				<transition name="slide-fade">
					<div class="box" v-show="display" @mouseleave="cancelDisplay()">
						<div class="hover_m">
							<div class="box_item" v-for="(item,index) in footer" :key="index"
								v-bind:style="{marginRight:item.css}">
								<div class="f_content"
									style="margin-top:0.104167rem;cursor:pointer;transition-duration:0.3s"
									v-for="(item2,index2) in item.contents" :key="index2"
									@click="bottomJumpTo(item2.router,item2.index,index+1)"
									:class="['active_b:item2.index==current2',item.title==='智能填报'?'Titlecolor':'']">
									{{item2.content}}
								</div>
							</div>
						</div>
					</div>
				</transition>
				<div class="top">
					<div class="left">祝所有考生考试顺利！</div>
				</div>
				<div class="second_cover">
					<div class="second">
						<div class="merge">
							<div class="logo"><img
									src="../pic/5.png" alt="">
							</div>
							<div class="name">大学导航</div>
							<div class="nav">
								<div class="bar">
									<div class="item" v-for="(item,index) in nav" :key="index"
										@click="jumpTo(item.router,index)" @mouseover="setDisplay()"
										:class="['active:index==current',item.title==='智能填报'?'Titlecolor':'']">
										{{item.title}}
									</div>
									<div class="search">
										<!-- <div class="icon"><i class="el-icon-search"></i></div> -->
										<div class="language" v-if="!adminFlag">
											<div class="simplified" style="border-bottom:0"
												@click="jumpToLogin('/login')"> 登录 </div>
											<div class="icon"></div>
											<div class="traditional" style="border-bottom:0"
												@click="jumpToLogin('/people')"> 注册</div>
										</div>
										<div class="language" v-if="adminFlag">
											<div class="logined" style="border-bottom:0"> {{username}} </div>
										</div>
										<!-- <div class="language" >
                                        <a class="change"  style="border-bottom:0" @click="changeProvince('/changeProvince')" v-if="admin"> [切换省份] </a>
                                    </div> -->
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>

			</el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
			<el-footer>
				<div class="footer">
					<div class="f_item" v-for="(item,index) in footer" :key="index">
						<div class="f_title">
							{{item.title}}
						</div>
						<div class="line"></div>
						<div class="f_content" v-for="(item2,index2) in item.contents" :key="index2"
							@click="bottomJumpTo(item2.router,item2.index)" :class="{active_b:item2.index==current2}">
							{{item2.content}}
						</div>
					</div>
				</div>
			</el-footer>
		</el-container>
		<div class="model">
			<el-dialog title="填报警示" :visible.sync="dialogVisible" width="70%">
				<div class="explain">
					<p style="width: 100%; font-size: 25px; text-align:justify;
										text-justify:inter-ideograph;">1.每年<span
							style="color:red; font-size: 25px;">6月22日00:00时---当年8月31日24:00时期间：注册账户只能凭借卡号和密码方可登录系统，输入一个真实的高考分数，</span>
							进行志愿方案的自主设计；同时，该卡号和密码一经使用将被锁定，不能再输入其他分数进行志愿方案的自主设计，但可以重复登录查看、修改志愿方案。
					</p>
					<p style="width: 100%; font-size: 25px; text-align:justify;
					text-justify:inter-ideograph;">2.每年<span
							style="color:red; font-size: 25px;">9月01日00:00时---次年6月21日24:00时期间</span>：新、老注册账户凭注册账号、密码可登录系统输入<span
							style="color:red; font-size: 25px;">无限个</span>成绩，进行<span
							style="color:red; font-size: 25px;">无限次</span>模拟填报。</p>
					<p style="width: 100%; font-size: 25px; text-align:justify;
					text-justify:inter-ideograph;">3.本平台<span
							style="color:red; font-size: 25px;">当前</span>可为除新疆、西藏、云南、吉林、内蒙省（区）外的其它26个省（市、区）的<span
							style="color:red; font-size: 25px;">普通本科</span>高考志愿填报提供参考服务。</p>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="makesure('/login')">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		<div v-if="!displayModel" class="mobileWeb">
			<div class="mobile_icon">
				<img src="https://xxx.oss.com/dxdh/1622366714164.png" alt=""
					style="width:100%;height:100%">
			</div>
			<div class="mobileFont">为了更好的使用体验，请使用PC端访问网站</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// admin:false,
				displayModel: true,
				display: false,
				adminFlag: false,
				username: "",
				address1: {
					address: "莲塘路11号",
					phone: "123456789",
					mail: "123456789@163.com",
				},
				nav: [{
						title: "首页",
						// router:"/RegistrationInformation",
						// router:"/Preparationforfilling"
						router: "/informationfilling"
					},
					{
						title: "职业测试",
						router: ""
					},
					{
						title: "考生应知",
						router: "/workingmanual"
					},
					{
						title: "智能填报",
						css: "color:red",
						router: "/informationfilling"
					},
					// {
					// 	title: "职业测试",
					// 	router: ""
					// },
					{
						title: "学业规划",
						router: ""
					},
					{
						title: "在线服务",
						router: "/"
					},
					{
						title: "高考政策",
						router: "/paralle"
					},
					{
						title: "个人中心",
						router: ""
					},
				],
				footer: [{
						title: "职业测试",
						css: "0.264167rem",
						contents: [{
								content: "职业兴趣",
								router: "http://chtest.yinghuacy.cn/hld/test/1?keyword_code=360PC116",
								index: 5,
							},
							{
								content: "职业性格",
								router: "https://www.welefen.com/lab/mbti/",
								index: 6,
							},
							{
								content: "职业价值",
								router: "http://www.zhiyeguihua.com/ceping/id/19",
								index: 7,
							},
							{
								content: "职业意向",
								router: "/CareerIntention",
								index: 1,
							},
						]
					},
					{
						title: "考生应知",
						css: "0.254167rem",
						contents: [
							// {
							// 	content: "操作指南",
							// 	router: "/workingmanual",
							// 	index: 0,
							// },

							{
								content: "专业剖析",
								router: '/ProfessionalDirection',
								index: 10,
							},
							{
								content: "学科排名",
								router: "/Disciplineranking",
								index: 36,
							},
							{
								content: "重点学科",
								router: '/Keydisciplines',
								index: 37,
							},
							{
								content: "院校剖析",
								router: "/UniversityDirection",
								index: 4,
							},
						]
					},
					{
						title: "智能填报",
						css: "0.238167rem",
						contents: [{
								content: "自主填报",
								router: "/login",
								index: 3,
							},
							{
								content: "最终方案",
								router: "/Finalscheme",
								index: 22,
							},
							{
								content: "往年数据",
								router: "/historicaldata",
								index: 2,
							},
							// {
							// 	content: "自主填报",
							// 	router: "/login",
							// 	index: 3,
							// },
							// {
							// 	content: "最终方案",
							// 	router: "/Finalscheme",
							// 	index: 22,
							// },
							// {
							// 	content: "专家一对一",
							// 	router: "/",
							// 	index: 4,
							// },
						]
					},
					{
						title: "学业规划",
						css: "0.218999rem",
						contents: [
							// {
							// 	content: "国内学业",
							// 	router: "/nationalstudy",
							// 	index: 8,
							// },
							{
								content: "学业路径",
								router: "/interstudy",
								index: 9,
							},
							// {
							//     content:"报考案例",
							//     router:"/applicationcases",
							//     index:10,
							// },
							{
								content: "学业安排",
								router: "/academicplanning",
								index: 23,
							},
							{
								content: "学业达人",
								router: "/inspirationaltalents",
								index: 11,
							},
						]
					},
					{
						title: "在线服务",
						css: "0.238999rem",
						contents: [{
								content: "专家咨询",
								router: "/nonepage",
								index: 12,
							},
							{
								content: "在线答疑",
								router: "/nonepage",
								index: 13,
							},
							{
								content: "优惠奖励",
								router: "/nonepage",
								index: 14,
							},

						]
					},
					{
						title: "高考政策",
						contents: [{
								content: "三类数据",
								router: "/paralle",
								index: 15,
							},
							{
								content: "基本概念",
								router: "/onescore",
								index: 16,
							},
							{
								content: "传统高考",
								router: "/subjectaccept",
								index: 17,
							},
							{
								content: "新型高考",
								router: "/newexam",
								index: 18,
							},
						]
					},
					{
						title: "个人中心",
						contents: [{
								content: "我的信息",
								router: "/people",
								index: 19,
							},
							{
								content: "修改密码",
								router: "/changepassword",
								index: 35,
							},
							{
								content: "问题反馈",
								router: "/problemresolve",
								index: 20,
							},
							{
								content: "退出登录",
								router: "/",
								index: 21,
							},
						]
					},

				],
				current: 2,
				current2: 25,
				lang: true,
				dialogVisible: false,
			}
		},
		methods: {
			//管理员切换账号
			changeProvince(router) {
				this.$router.push(router)
			},
			//跳转登录或者注册
			jumpToLogin(router) {
				if (router == '/login') {
					this.dialogVisible = true

				} else {
					if (router == '/people') {
						sessionStorage.setItem('editInformation', 0)
					}
					this.$router.push(router)
					//按照原型图，就把首页点亮吧
					this.current = 0
					sessionStorage.setItem('selected', 0)
					this.display = false
				}

			},
			jumpTo(router, index) {
				this.$router.push(router)
				this.current = index
				sessionStorage.setItem('selected', this.current)
				this.current2 = -1
				this.display = false
				// console.log(index);
				// }

			},
			makesure(router) {
				this.dialogVisible = false
				this.$router.push(router)
			},
			bottomJumpTo(router, index, showIndex) {
				//退出登录
				if (index === 21) {
					sessionStorage.removeItem('username')
					sessionStorage.removeItem('active_user')
					sessionStorage.removeItem('isFilling')
					sessionStorage.removeItem('fromSelect')
					sessionStorage.removeItem('editInformation')
					sessionStorage.removeItem('token')
					sessionStorage.removeItem('preferredtable')
					sessionStorage.removeItem('tableSelection')
					sessionStorage.removeItem('limittable')
					sessionStorage.removeItem('limitselect')
					sessionStorage.removeItem('Optimalselect')
					sessionStorage.removeItem('firstform')
					sessionStorage.removeItem('form')
					sessionStorage.removeItem('finaltable')
					sessionStorage.removeItem('isActivation')
					sessionStorage.removeItem('isTest')
					// sessionStorage.removeItem('role')
					this.adminFlag = false
					// console.log('l');
					this.$router.push('/login')
					this.$notify.success({
						title: "登出成功",
						message: "已退出登录"
					})
					return
				} else if (index === 3) {
					if (sessionStorage.username != null) {
						if (sessionStorage.form == 1) {
							this.$router.push('/informationfilling')
							this.current2 = index
							sessionStorage.setItem('b_selected', this.current2)
							this.display = false
							return
						}
						this.$router.push('/amount')
						this.current2 = index
						sessionStorage.setItem('b_selected', this.current2)
						this.display = false
						return
					} else {
						return this.dialogVisible = true
					}
				} else if (index === 19) {
					sessionStorage.setItem('editInformation', 1)
				}
				//职业测试打开新页面
				if (router === "http://chtest.yinghuacy.cn/hld/test/1?keyword_code=360PC116" || router === "https://www.welefen.com/lab/mbti/" ||
					router === "http://www.zhiyeguihua.com/ceping/id/19") {
					window.open(router, '_blank')
					// console.log('??????');
					return
				}
				this.$router.push(router)
				//设置current 选择子导航内容时同时改变主导航条选中项
				this.current = showIndex
				this.current2 = index
				sessionStorage.setItem('b_selected', this.current2)
				sessionStorage.setItem('selected', this.current)
				this.display = false
				// console.log(index);
			},
			setDisplay() {
				this.display = true
			},
			cancelDisplay() {
				this.display = false
			},
			setSelected() {
				this.current = sessionStorage.selected
				// this.lang = JSON.parse(sessionStorage.lang)
				this.current2 = sessionStorage.b_selected
				// console.log(this.current2);
				// console.log(this.lang);
			},
			//获取省份及对应的id
			getProvince() {
				this.$axios.post(`${this.baseURL}/modelConfirm/getModelConfirm`).then(res => {
					console.log(res);
					sessionStorage.setItem('province', JSON.stringify(res.data.data))
				})
			},
			//获取已登录用户的成绩信息
			getUserScoreData() {
				//模拟已登录admin账户 测试
				// let admin = '2018030801001'
				// sessionStorage.setItem('username',JSON.stringify(admin))//设置缓存
				//
				let username = JSON.parse(sessionStorage.username)
				// console.log(username);
				this.$axios.post(`${this.baseURL}/scoreInfo/getScoreInfoByusername?username=${username}`)
					.then(res => {
						if (res.data.status == 200) {
							sessionStorage.setItem('form', JSON.stringify(res.data.data))
							// console.log(res.data);
							// console.log(this.baseURL);
						}
						// else{
						//     sessionStorage.setItem('form',1) 
						// }
					})
					.catch(err => {
						console.log(err);
						//若form为1则说明该用户还未填写成绩信息
						sessionStorage.setItem('form', 1)
					})
			},
		},
		mounted() {
			this.getProvince();
			// this.getUserScoreData();
			this.setSelected();

		},
		created() {
			// let role = JSON.parse(sessionStorage.role)
			// console.log(role)
			this.$eventBus.$on('adminFlag', (message) => {
				this.adminFlag = message
			})
			let flag = navigator.userAgent.match(
				/(phone|pod|iPhone|iPod|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
			)
			if (flag) {
				this.displayModel = false
			}
			//写在mounted中不生效?
			if (JSON.parse(sessionStorage.getItem('username'))) {
				this.username = JSON.parse(sessionStorage.getItem('username'))
				this.adminFlag = true

			} else {
				this.adminFlag = false
			}
			//创建监听器 监听Storage中username的变化 
			window.addEventListener('setItem', () => {
				// console.log("kkkkkk");
				if (JSON.parse(sessionStorage.getItem('username'))) {
					this.username = JSON.parse(sessionStorage.getItem('username'))
					this.adminFlag = true
				} else {
					this.adminFlag = false
				}
			})
		}

	}
</script>

<style scoped>
	.Titlecolor {
		color: #dcdc00;
	}

	.el-container {
		min-width: 500px;
	}

	.el-header {
		min-height: 142px;
		opacity: 1;
		padding: 0 !important;
		overflow: hidden;
	}

	.el-footer {
		min-height: 365px;
		background: #565555;
		opacity: 1;
		padding: 0 !important;
		/* position: relative; */
	}

	.el-main {
		padding: 0 !important;
		min-height: 500px;
		background-color: rgba(244, 245, 248, 1);
	}

	.explain {
		text-align: center;
		  /* justify-content: flex-start; */
		  /* align-items: auto; */
		  padding-left: 15px;
		  text-indent: -23px;
	}

	.model>>>.el-dialog__title {
		font-size: 40px !important;
	}

	.model>>>.el-button--small {
		font-size: 20px !important;
	}

	.top {
		width: 100%;
		height: 40px;
		background: #F5F5F5;
		position: relative;
		z-index: 1;
	}

	.top .left {
		/* width: 272px; */
		/* height: 16px; */
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 44px;
		color: #C3C3C3;
		position: absolute;
		left: 13.54%;

	}

	.second_cover {
		background-color: #FFFFFF;
		/* opacity: .9; */
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 1;
	}

	.second {
		width: 100%;
		height: 102px;
		position: relative;
		/* z-index: 0; */
		overflow: hidden;
		width: 1650px;
		margin: 0 auto;
		background-color: #ffffff;
		/* opacity: .9; */
		/* margin-left: 240px; */
	}

	.second .logo {
		position: absolute;
		left: 0;
		top: 20px;
		max-width: 62px;
		max-height: 62px;
	}

	.logo img {
		width: 100%;
		height: 100%;
	}

	.second .name {
		position: absolute;
		left: 15px;
		top: 22px;
		width: 294px;
		height: 49px;
		font-family: Noto Sans SC;
		font-size: 42px;
		font-weight: 400;
		color: rgba(51, 170, 255, 1);
	}

	.second .merge {
		width: 356px;
		/* height: 62px; */
		position: absolute;
		left: 90px;
		top: 0;
	}

	.second .nav {
		width: 1070px;
		height: 24px;
		position: absolute;
		top: 38px;
		left: 410px;
		/* background-color: black; */
		display: flex;
		flex-direction: inherit;
	}

	.second .bar {
		/* flex: 0.9; */
		width: 1300px;
		height: 100%;
		/* background-color: #fff; */
		/* text-align: left; */
		margin-right: 20px;
		position: relative;
	}

	.second .item {
		display: inline-block;
		margin-right: 28px;
		font-size: 23px;
		font-family: Noto Sans SC;
		/* font-style: regular; */
		font-weight: 400;
		line-height: 41px;
		cursor: pointer;
		height: 29px;
		transition-duration: 0.3s;
		padding-bottom: 27px;
	}

	.second .item:hover {
		color: rgba(51, 170, 255, 1);
		border-bottom: 3px solid rgba(51, 170, 255, 1);
	}

	.second .search {
		/* flex: 0.2; */
		/* height: 100%; */
		position: absolute;
		/* width: 80px; */
		left: 985px;
		top: 13.5px;
		color: rgba(124, 124, 124, 1);

	}

	.icon {
		border-right: 2px solid rgba(124, 124, 124, 1);
		width: 0.5px;
		height: 18px;
		margin-left: 5px;
		margin-right: 5px;
		margin-top: 5px;

	}

	.active {
		color: rgba(51, 170, 255, 1);
		border-bottom: 3px solid rgba(51, 170, 255, 1);
	}

	.active_b {
		color: rgba(247, 255, 9, 1) !important;
	}

	.footer {
		position: relative;
		width: 100%;
		/* margin: 0 auto; */
		/* margin: 0 auto; */
		/* margin-left: 250px; */
		/* background-color: #fff; */
		/* min-height:132px; */
		padding-top: 24px;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.footer .qr_code {
		width: 160px;
		/* height: 132px; */
		/* background-color: #fff; */
		transition-duration: 0.5s;
		/* cursor: pointer; */
		font-family: Noto Sans SC;
		font-size: 14px;
		color: #fff;
		text-align: left;

	}

	/* .qr_code:hover{
    transform:scale(1.5)
} */
	.footer .f_item {
		width: 130px;
		min-height: 150px;
		margin-right: 65px;
		display: flex;
		flex-direction: column;

	}

	.footer .f_title {
		font-size: 20px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 34px;
		color: #FFFFFF;
		text-align: left;
		margin-bottom: 10px;
	}

	.footer .line {
		width: 100%;
		height: 0.01px;
		border-bottom: 1px solid #ffffff;
		margin-bottom: 10px;
	}

	.footer .f_content {
		font-size: 16px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 27px;
		color: rgba(255, 255, 255, .4);
		text-align: left;
		cursor: pointer;
		transition-duration: 0.3s;
	}

	.f_content:hover {
		color: rgba(247, 255, 9, 1)
	}

	.language {
		width: 87px;
		height: 25px;
		display: flex;
		flex-direction: row;
		position: relative;
		top: -4px;
	}

	.simplified {
		cursor: pointer;
		transition-duration: 0.3s;
		font-size: 17px;
		font-family: Noto Sans SC;
	}

	.logined {
		/* cursor: pointer; */
		transition-duration: 0.3s;
		font-size: 15px;
		font-family: Noto Sans SC;
		position: relative;
		top: 4px;
		left: -9px;
	}

	.change {
		cursor: pointer;
		transition-duration: 0.3s;
		font-size: 15px;
		font-family: Noto Sans SC;
		position: relative;
		top: 4px;
		left: -9px;
		color: #2fc1f2;
	}

	.traditional {
		cursor: pointer;
		transition-duration: 0.3s;
		font-size: 17px;
		font-family: Noto Sans SC;
		/* margin-left: 1px; */
	}

	.language .simplified:hover {
		color: rgba(51, 170, 255, 1);
	}

	.language .traditional:hover {
		color: rgba(51, 170, 255, 1);

	}

	.box_b {
		width: 1910px;
		height: 250px;
		background-color: black;
		opacity: 0.8;
		position: absolute;
		top: 141px;
		z-index: 1000;
		margin: auto;
		top: 141px;
		left: 0;
		right: 0;

	}

	.box_item {
		/* width:130px; */
		/* min-height: 150px; */
		margin-right: 47px;
		display: flex;
		flex-direction: column;
		font-family: Noto Sans SC;
		font-weight: 400;
		font-size: 18px;
	}

	.box {
		width: 1910px;
		height: 200px;
		position: absolute;
		opacity: 0.9;
		top: 141px;
		z-index: 1000;
		margin: auto;
		top: 141px;
		left: 0;
		right: 0;
	}

	.box .hover_m {
		width: 832px;
		min-height: 200px;
		/* background-color: #fff; */
		margin-left: 780px;
		/* padding-top: 16px; */
		display: flex;
		flex-direction: row;
		text-align: left;
		position: absolute;
		z-index: 999999999999;
		color: rgba(255, 255, 255, .9);
		font-size: 14px !important;
		/* color: rgba(247, 255, 9, .9); */
	}

	.slide-fade-enter {
		opacity: 0;
	}

	.slide-fade-leave {
		opacity: 0;
	}

	.slide-fade-enter-active {
		transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}

	.slide-fade-leave-active {
		transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}

	.test {
		background-color: aqua;
		width: 53px;
		height: 155px;
	}

	.police_info {
		margin-top: 30px;
		font-family: Noto Sans SC;
		/* text-decoration: none; */
		/* color: rgba(255, 255, 255, 1); */
		/* font-size: 12px; */
		width: 200px;
		text-align: left;
	}

	a:visited {
		color: rgba(255, 255, 255, 1);
	}

	a:hover {
		color: rgba(255, 255, 255, .4);
	}

	.info_font {
		text-decoration: none;
		color: rgba(255, 255, 255, 1);
		font-size: 13px;
		text-align: left;
	}

	.mobileWeb {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.mobileFont {
		width: 100%;
		font-family: Noto Sans SC;
		color: black;
		font-size: 0.125rem;
		margin-top: 0.2rem;
	}

	.mobile_icon {
		width: 0.6rem;
		height: 0.6rem;
	}
</style>
